<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/swiper-bundle.min.css">
    <link rel="stylesheet" href="../css/animate.min.css">
    <script src="../js/jquery.min.js"></script>
    <script src="../js/swiper-bundle.min.js"></script>
    <script src="../js/swiper.animate1.0.3.min.js"></script>

    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        html,
        body {
            height: 100%;
        }

        .swiper-container {
            height: calc(100% - 90px);
        }

        .swiper-slide {
            height: 100%;
        }

        #loading-tip-box{
            position: fixed;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index: 521;
            background: #000;
        }

        .loading-tip{
            width: 100%;
            height: 100%;
            /* opacity: 0.6; */
            background-image: url("../img/space.jpg");
            background-size: 100%;
        }

        .loading-box{
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 80%;
            height: 20px;
            border-radius: 20px;
            background: #fff;
        }
        .loading{
            width: 0%;
            height: 100%;
            border-radius: 20px;
            background: #000;
            position: relative;
            transition: all ease 2s;
            border: 1px solid #fff;
        }
        .loading-img{
            width: 36px;
            position: absolute;
            right: -30px;
            top: 50%;
            transform: translateY(-50%);
        }
        .no3{
            position: absolute;
            right: -30px;
            top: -28px;
            width: 36px;
        }
        .loading-img-stars1{
            position: absolute;
            animation: rotate1 1.2s linear infinite;
        }
        .loading-img-stars2{
            position: absolute;
            animation: rotate2 1s linear infinite;
        }
        .loading-img-stars3{
            position: absolute;
            animation: rotate3 1.1s linear infinite;
        }
        @keyframes rotate1{
            from{
                width: 0px;
                top: -0px;
                right: 5px;
                transform: rotate(0deg)
            }
            to{
                width: 8px;
                top: -3px;
                right: 10px;
                transform: rotate(360deg)
            }
        }
        @keyframes rotate2{
            from{
                width: 0px;
                top: 3px;
                right: 8px;
                transform: rotate(0deg)
            }
            to{
                width: 8px;
                top: 0px;
                right: 13px;
                transform: rotate(360deg)
            }
        }
        @keyframes rotate3{
            from{
                width: 0px;
                top: 6px;
                right: 5px;
                transform: rotate(0deg)
            }
            to{
                width: 8px;
                top: 3px;
                right: 12px;
                transform: rotate(360deg)
            }
        }
    </style>
</head>

<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">slider1</p>
                <p class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1.5s" swiper-animate-delay="0.3s">left</p>
            </div>
            <div class="swiper-slide">
                <p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">slider2</p>
            </div>
            <div class="swiper-slide">
                <p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">slider3</p>
            </div>
        </div>
    </div>
    
    <!-- Mondo Bongo -->
    <!-- <audio src="music/Mondo Bongo.mp3" controls></audio>
    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=100% height=86 src="//music.163.com/outchain/player?type=2&id=5048932&auto=1&height=66"></iframe> -->
    
    <div id="loading-tip-box" hidden>
        <div class="loading-tip">
            <div class="loading-box">
                <div class="loading">
                    <img src="../img/metro.png" alt="#" class="loading-img">
                    <img src="../img/星星.png" alt="#" class="loading-img-stars1">
                    <img src="../img/星星.png" alt="#" class="loading-img-stars2">
                    <img src="../img/星星.png" alt="#" class="loading-img-stars3">
                </div>
                <img src="../img/北京地铁3号线1.png" alt="#" class="no3">
            </div>
        </div>
    </div>
    
    <script>
        function isMobile(){
            let info = navigator.userAgent;
            let agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPod", "iPad"];
            for(let i = 0; i < agents.length; i++){
                if(info.indexOf(agents[i]) >= 0) return true;
            }
            return false;
        }

        window.onload = function(){
            console.log( document.getElementsByClassName("loading-img")[0].complete )
            console.log(isMobile())
            // 移动端显示内容，PC暂不支持。
            if(!isMobile()){
                
            }else{
                if( document.getElementsByClassName("loading-img")[0].complete ){
                    // 显示loading-tip
                    let loadingDOM = document.getElementById("loading-tip-box");
                    loadingDOM.removeAttribute("hidden");

                    let loadingNUM = Math.random()*2+1;

                    setTimeout(_=>{
                        document.getElementsByClassName("loading")[0].style.width = "100%";
                    },0)

                    //  初始化swiper
                    var mySwiper = new Swiper('.swiper-container', {
                        on: {
                            init: function () {
                                swiperAnimateCache(this); //隐藏动画元素
                                swiperAnimate(this); //初始化完成开始动画
                            },
                            slideChangeTransitionEnd: function () {
                                swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
                                // this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); // 动画只展现一次，去除ani类名
                            }
                        },
                        autoplay: 5000,//可选选项，自动滑动
                        direction: 'vertical',// 垂直
                    })
                }
            }
        }

    </script>
</body>

</html>